<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Castaway</title>
    <link rel="stylesheet" href="css/normalize.css_8.0.1_normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <a href="" class="logo">
                <img src="img/logo.svg" alt="Castaway" class="logo-img"></a>
            <ul class="header-list">
                <li class="header-item active">Home</li>
                <li class="header-item">Episodes</li>
                <li class="header-item">About</li>
                <li class="header-item">Contact</li>
            </ul>
        </header>
        <!-- /.header -->
        <div class="hero-block">
            <div class="image-container">
                <img src="img/hero-image.jpg" alt="" class="hero-image">
            </div>
            <div class="hero-text-container">
                <p class="hero-text">Take your podcast&nbsp;to the
                    <br><span>next</span> <strong>level</strong>
                </p>
                <h2 class="hero-link-title">Listen on</h2>
                <ul class="hero-link-list">
                    <li class="hero-link"><img src="img/hero-img-1.svg" alt=""
                            class="hero-link-img"></li>
                    <li class="hero-link"><img src="img/hero-img-2.svg" alt=""
                            class="hero-link-img"></li>
                    <li class="hero-link"><img src="img/hero-img-3.svg" alt=""
                            class="hero-link-img"></li>
                    <li class="hero-link"><img src="img/hero-img-4.svg" alt=""
                            class="hero-link-img"></li>
                    <li class="hero-link"><img src="img/hero-img-5.svg" alt=""
                            class="hero-link-img"></li>
                </ul>
            </div>
            <!-- /.hero-text-container -->
            <!-- /.image-container -->
        </div>
        <!-- /.hero-block -->
        <div class="episodes">
            <header class="header-ep">
                <h2 class="ep-title">Latest episodes</h2>
                <a href="#" class="button">View all episodes</a>
            </header>
            <!-- /.header-ep -->
            <div class="card-container">
                <div class="card-image-block">
                    <img class="card-image" src="img/card-img-1.jpg" alt="">
                </div>
                <div class="card-text-block">
                    <span class="ep-label">Gear</span>
                    <h3 class="card-title">Episode 3</h3>
                    <h2 class="card-title-strong">Should you get outboard audio
                        gear?</h2>
                    <p class="card-desc">Is hardware really worth it when it
                        comes
                        to podcasting?
                        The answer is...it depends. Here’s our reasons on why
                        you
                        might want to
                        consider picking something up.</p>
                    <a href="#" class="button">View Episode Details</a>
                </div>
            </div>
            <!-- /.card-container -->
            <div class="card-container">
                <div class="card-image-block">
                    <img class="card-image" src="img/card-img-2.jpg" alt="">
                </div>
                <div class="card-text-block">
                    <span class="ep-label">Tips & Tricks</span>
                    <h3 class="card-title">Episode 2</h3>
                    <h2 class="card-title-strong">Mic tricks to take <br> you to
                        the
                        next level</h2>
                    <p class="card-desc">Stop rolling with those default
                        settings on your mic. These small tweaks will take you
                        from sounding good to great.</p>
                    <a href="#" class="button">View Episode Details</a>
                </div>
            </div>
            <!-- /.card-container -->
            <div class="card-container">
                <div class="card-image-block">
                    <img class="card-image" src="img/card-img-3.jpg" alt="">
                </div>
                <div class="card-text-block">
                    <span class="ep-label">Gear</span>
                    <h3 class="card-title">Episode 1</h3>
                    <h2 class="card-title-strong">The best microphone under $200
                    </h2>
                    <p class="card-desc">With so many microphones on the market,
                        how are you
                        supposed to know what’s the best? Take a look at our top
                        picks.</p>
                    <a href="#" class="button">View Episode Details</a>
                </div>
            </div>
            <!-- /.card-container -->
        </div>
        <!-- /.episodes -->
        <div class="guest-container">
            <div class="guest-desc">
                <button class="guest-btn"><img src="img/arrow.png"
                        alt="Button"></button>
                <span class="button-text">Meet your host</span>
                <h2 class="guest-name">Jacob Paulaner
                </h2>
                <p class="guest-text">Jacob has a background in audio
                    engineering, and has been
                    podcasting since the early days.</p>
                <p class="guest-text">He’s here to help you level up your game
                    by sharing
                    everything he’s learned along the way.</p>
            </div>
            <div class="guest-photo">
                <!-- <img src="img/guest-img.jpg" alt="guest" class="guest-img"> -->
            </div>
        </div>
        <!-- /.guest-container -->
        <div class="form-container">
            <div class="form-desc-container">
                <span class="form-text">Email Newsletter</span>
                <h2 class="form-title">Subscribe for updates</h2>
            </div>
            <form action="#" class="form">
                <input type="text" placeholder="Name" type="name"
                    class="input-form">
                <input type="email" placeholder="Email" type="email"
                    class="input-form">
                <button class="button-form">Submit</button>
            </form>
        </div>
        <!-- /.form-container -->
        <div class="testimonials">
            <div class="testimonials-container">
                <div class="testimonial-item">
                    <div class="rating">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                    </div>
                    <p class="testimonial-text">I can’t recommend this podcast
                        enough</p>
                    <span class="testimonial-name">Betty Lacey</span>
                </div>
                <div class="testimonial-item">
                    <div class="rating">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                    </div>
                    <p class="testimonial-text">Jacob is the best in the
                        business</p>
                    <span class="testimonial-name">Adam Driver</span>
                </div>
                <div class="testimonial-item">
                    <div class="rating">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                    </div>
                    <p class="testimonial-text">A wealth of audio knowledge</p>
                    <span class="testimonial-name">Marcus Brown</span>
                </div>
                <div class="testimonial-item">
                    <div class="rating">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                    </div>
                    <p class="testimonial-text">Every episode is a gem!</p>
                    <span class="testimonial-name">Jessica Knowl
                    </span>
                </div>
                <div class="testimonial-item">
                    <div class="rating">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                    </div>
                    <p class="testimonial-text">Whoa whoa, let me take some
                        notes!</p>
                    <span class="testimonial-name">Scott Adams</span>
                </div>
                <div class="testimonial-item">
                    <div class="rating">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                        <img src="img/star.svg" alt="" class="rating-image">
                    </div>
                    <p class="testimonial-text">I’ve upped my
                        game&nbsp;considerably
                        since I started
                        listening
                    </p>
                    <span class="testimonial-name">Steven Blast</span>
                </div>
            </div>
        </div>
        <!-- /.testimonials -->
        <footer class="footer">
            <div class="footer-container">
                <div class="footer-column">
                    <img src="img/logo.svg" alt="Logo" class="footer-logo">
                    <div class="social-links">
                        <a href="#" class="social-link"><img src="img/IMAGE.svg"
                                alt="" class="social-link-image"></a>
                        <a href="#" class="social-link"><img
                                src="img/IMAGE-2.svg" alt=""
                                class="social-link-image"></a>
                        <a href="#" class="social-link"><img
                                src="img/IMAGE-1.svg" alt=""
                                class="social-link-image"></a>
                    </div>
                </div>
                <div class="footer-column">
                    <div class="footer-links-column">
                        <a href="#" class="footer-link">Home</a>
                        <a href="#" class="footer-link">About</a>
                        <a href="#" class="footer-link">Episodes</a>
                        <a href="#" class="footer-link">Contact</a>
                    </div>
                </div>
                <div class="footer-links-column">
                    <a href="#" class="footer-link">Style Guide</a>
                    <a href="#" class="footer-link">Instructions</a>
                    <a href="#" class="footer-link">Changelog</a>
                    <a href="#" class="footer-link">Credit</a>
                    <a href="#" class="footer-link">Powered by Webflow</a>
                    <a href="#" class="footer-link">Licenses</a>
                </div>
                <div class="footer-links-row">
                    <a href="#" class="footer-link"><img
                            src="img/hero-img-1.svg" alt=""
                            class="footer-img"></a>
                    <a href="#" class="footer-link"><img
                            src="img/hero-img-2.svg" alt=""
                            class="footer-img"></a>
                    <a href="#" class="footer-link"><img
                            src="img/hero-img-3.svg" alt=""
                            class="footer-img"></a>
                    <a href="#" class="footer-link"><img
                            src="img/hero-img-4.svg" alt=""
                            class="footer-img"></a>
                    <a href="#" class="footer-link"><img
                            src="img/hero-img-5.svg" alt=""
                            class="footer-img"></a>
                </div>
            </div>
            <!-- /.footer-container -->
        </footer>
        <!-- /.footer -->
    </div>
    <!-- /.container -->
    <script src="js/main.js"></script>
</body>
</html>